<template>
	<!-- 1.启动应用，进入登录页面。页面上方显示产品Logo，中部显示
	标题“账号”、账号输入框、标题“密码”、密码输入框。下方显示、
	忘记密码按钮、登录按钮和用户注册按钮。 -->

	<!-- 2.用户名和密码输入框、登录按钮均为圆角样式。用户名输入框
	只能输入大小写字母或数字，其他无法输入，最长输入10位。密码输
	入框默认密文显示，具有显示与隐藏按钮，点击可以实现显示或隐藏
	密码功能。 -->
	<view class="box">
		<image src="../../static/logo.png"></image>

		<view class="input">
			<input 
			type="text" 
			value="" 
			placeholder="账号" 
			maxlength="10" 
			v-model="account" 
			@input="onInputAccount" 
			/>
		</view>
		<view class="input" >
			<input type="text" value="" :password="!showPwd" placeholder="密码" v-model="password"  />
			<text style="" @click="showPwd = !showPwd">{{ showPwd ? '隐藏' : '显示' }}密码</text>
		</view>
		<view class="dibu" style="display: flex; justify-content: space-between;">
			<text>忘记密码</text>
			<text @click="goReg()">用户注册</text>
		</view>
		<button type="primary" @click="onLogin">登录</button>
	</view>
</template>

<script>
	// 3.点击登录按钮，判断用户名和密码框是否为空，如果为空请提
	// 示友好错误；不为空的情况下请求API，用户名和密码正确后跳转到
	// 首页，反之显示友好的错误提示。
	export default {
		data() {
			return {
				account: '',
				password: '',
				showPwd: '',
			}
		},
		methods: {
			onInputAccount(e) {
				let v = e.detail.value;
				this.account = v;
				let f = v.replace(/[^a-zA-Z0-9]/g, '');
				this.$nextTick(function() {
					this.account = f
				})
			},

			onLogin() {
				if (!this.account || !this.password) {
					return uni.showToast({
						title: '账号密码不能为空',
						icon: 'error'
					})
				}
				uni.reLaunch({
					url: '../home/home'
				})
			},
			goReg() {
				uni.navigateTo({
					url: '../reg/reg'
				})
			}
		},

	}
</script>

<style scoped>
page{
	background-color: #F8F8F8;
}
.box{
	padding: 60rpx;
	padding-top: 300rpx;
}
image{
	width: 240rpx;
	height: 240rpx;
	margin-left: 190rpx;
}
.input{
	border: 3rpx solid #FFFFFF;	
	background-color: #FFFFFF;
	height: 90rpx;
	line-height: 90rpx;
	margin: 20rpx;
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
	text-align:left;
	border-radius: 12rpx;
	display: flex;
	justify-content: space-between;	
	input{
		line-height:90rpx ;
		height: 90rpx;
	}
	
	text{
		color:#666666;
	}
}
/* .active{
	border:2rpx solid  #007AFF;
} */
.dibu{
	color:#666666;
	margin:10rpx;
	font-size: 26rpx;
}
button{
	border-radius: 20rpx;
	/* margin:0 240rpx; */
}
/* input:focus{
		border:2rpx solid  #007AFF;
	} */
</style>
